<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>

<style>
    <!--
    object {
        left: 0;
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 14px;
        font: inherit;
        vertical-align: baseline;
    }

    .fileupload-block {
        position: relative;
        width: 100px;
        height: 100px;
        text-align: center;
        line-height: 100px;
        overflow: hidden;
        border: solid 1px #ddd;
        border-radius: 2px;
        cursor: default;
        margin-left: auto;
        margin-right: auto;
    }

    .fileupload-info {

    }

    .fileupload-file {
        font-size: 200px;
        display: inline-block;
        position: absolute;
        top: 0;
        right: 0;
        filter: alpha(opacity=0);
        -moz-opacity: 0;
        -khtml-opacity: 0;
        opacity: 0;
        cursor: pointer;
        width: 100px;
        height: 100px;
    }

    .fileupload-image {
        margin: auto;
    }

    .fileupload-delete {
        display: inline-block;
        position: absolute;
        height: 18px;
        width: 18px;
        padding: 3px;
        top: 1px;
        right: 1px;
        line-height: 18px;
        cursor: pointer;
    }

    .imgBtn {
        margin-left: auto;
        margin-right: auto;
    }

    -->
</style>
<div class="layui-btn-group">
    <a id="btnSave" href="javascript:classSave();" title="保存" class="layui-btn layui-btn-sm">
        <i class="layui-icon">&#xe654;</i>保存
    </a>
</div>

<fieldset>
    <legend>商品分类详情</legend>
    <form class="layui-form layui-form-pane" lay-filter="gcForm" id="gcForm" action="tvindex/updateHomePic.do?id="
          +${id } +'&pic_path='+${picPath }+'&name='+${name }>
    <div class="layui-form-item">
        <label class="layui-form-label">图片名称：</label>
        <div class="layui-input-block">
            <input type="text" name="gcName" lay-verify="gcName" value="${name}" maxlength="10" autocomplete="off"
                   placeholder="请输入图片名称" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">首页图片：</label>
            <div class="layui-input-block">
                <div class="fileupload-block" style="width:${imgW}px;height:${imgH}px;">

                    <img class="fileupload-image" id="Img" src='${picPath}'
                         style="display:inline;width:${imgW}px;height:${imgH}px;"/>

                    <img class="fileupload-delete" id="Delete" onclick="deleteImage();"
                         style="position:absolute;z-index:20;display:none;" src="images/x.jpg"/>

                    <label for="updinput" class="fileupload-file" title="点击上传图片"
                           style="width:${imgW}px;height:${imgH}px;">
                        <input type="file" accept=".jpg,.gif,.png,.jpeg,.bmp" class="image" id="updinput" name="image"
                               data-url="tvindex/uploadImage.do"
                               style="display:none;" multiple/>
                    </label>

                    <input class="fileupload-input" id="Input" type="hidden" name="picPath" value="${picPath}"/>
                    <label><span class="text-dot"></span></label>
                </div>
                <div>
                    <input id="imgBtn" type="button" class="imgBtn" onclick="upload();" style="display:none"
                           value="上传选中图片"/>
                    <div class="" id="img-progress"></div>
                </div>
            </div>
        </div>
    </div>
    </form>
</fieldset>
<script type="text/javascript">
    layui.config({
        base: "js/common/"
    }).use(["common", "element", "layer", "form", "table", "jquery"], function () {
        var elem = layui.element;
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;
        var $ = layui.jquery;
        layui.common.init();
        //图片上传
        $("#updinput").fileupload({
            dataType: "json",
            maxFileSize: "500000",
            success: function (data) {
                if (data.statusCode == "200") {
                    var w = $(this).attr("wValue");
                    var h = $(this).attr("hValue");
                    $("#Img").attr("tValue", data.model);
                    $("#Img").attr("src", data.forwardUrl).css("display", "block");
                    $("#image>object").css("height", "600");
                    $("#Delete").css("display", "block");
                    //初始化截图工具
                    $("#Img").cropper({aspectRatio: w / h});
                    mycroper = true;
                    $("#imgBtn").css("display", "block");
                } else if (data.statusCode == "300") {
                    layer.msg(data.message, {icon: 5, time: 2000});
                }
            }
        });
        //图片剪切
        var mycroper = false;
        //上传选中的图片部分并显示
        window.upload = function () {
            var delFile = $("#Img").attr("tValue");
            //获取截图工具选中的部分
            var cut = $("#Img").cropper("getCroppedCanvas").toDataURL("image/jpeg");
            cut = cut.substring(23);
            $.post("tvindex/uploadCanvas.do", {
                "canvasData": cut,
                "gcId": "${goodId}",
                "delFile": delFile
            }, function (json) {
                if (json.statusCode == "200") {
                    $("#Img").attr("src", json.forwardUrl).css("display", "block");
                    $("#image>object").css("height", "0");
                    $("#Delete").css("display", "block");
                    $("#Input").val(json.model);
                    if (mycroper) {
                        $("#Img").cropper("destroy");
                        mycroper = false;
                    }
                    $("#imgBtn").css("display", "none");
                }
                setTimeout(function () {
                }, 2000);
            }, "json");
        }
        //删除图片
        window.deleteImage = function () {
            $("#Img").removeAttr("src").css("display", "none");
            $("#image>object").css("height", 600);
            $("#Delete").css("display", "none");
            $("#Input").val("");
            //销毁截图工具
            if (mycroper) {
                $("#Img").cropper("destroy");
                mycroper = false;
            }
            $("#imgBtn").css("display", "none");
        };

        window.classSaved = function (data) {
            if (data.statusCode == 200) {
                layer.msg(data.message, {icon: 6, time: 2000});
            } else {
                layer.msg(data.message, {icon: 5, time: 2000});
            }
        };
        window.classSave = function () {
            var $this = $("#gcForm");
            $.post($this.attr("action"), $this.serialize(), classSaved, "json");
        };
    });
</script>